<template>
	<div class="b-b">
		<div class="b-head">
			<div><img src="../../pro-img/p-1.png" class="b-img1"/></div>
			<div class="dtt">网络台</div>
		</div>
		<div class="b-midd">
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-1.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">CNR音乐之声</div>
					<div class="b-spa2">正在播放：快意音乐</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">771.84万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-2.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">北京音乐广播</div>
					<div class="b-spa2">正在播放：古典也流行</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">73.2万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-3.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">CNR音乐之声</div>
					<div class="b-spa2">正在播放：快意音乐</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">56.99万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-4.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">Metro Radio FM94.5</div>
					<div class="b-spa2">正在播放：Height Tee</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">671.09万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-5.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">北京新闻广播</div>
					<div class="b-spa2">正在播放：健康有约</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">700.84万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-6.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">CNR都市之声</div>
					<div class="b-spa2">正在播放：律动工体北</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">55.9万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-7.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">平谷广播电台</div>
					<div class="b-spa2">正在加载...</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">92.4万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-8.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">北京交通广播</div>
					<div class="b-spa2">正在播放：在路上</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">300.59万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
			<div class="b-1">
				<div class="b-img2"><img src="../../b-img/b-9.jpg"/></div>
				<div class="b-div2">
					<div class="b-spa1">北京体育广播</div>
					<div class="b-spa2">正在播放：体育在线</div>
					<div class="b-div">
						<img src="../../b-img/b-p.png" class="b-img"/><span class="b-spa3">46.75万</span>
					</div>
				</div>
				<div class="b-spa4">收藏</div>
			</div>
		</div>
	</div>
</template>

<script>
	
</script>

<style>
	/*.b-img1{
		width: 2.173913rem;
		height: 2.173913rem;
	}*/
	.b-div2{
		flex-grow: 1;
	}
	.b-div{
		display: flex;
		align-items: center;
	}
	.b-spa4{
		font-size: 0.369565rem;
		color: #e13531;
		border: solid 0.021739rem #fadfdf;
		border-radius: 1.086956rem;
		padding: 0.152173rem 0.47826rem;
		margin-right: 0.473913rem;
	}
	.b-spa3{
		font-size: 0.413043rem;
		margin-top: 0.187826rem;
		margin-left: 0.143478rem;
	}
	.b-img{
		width: 0.456521rem;
		height: 0.456521rem;
		margin-left: 0.360869rem;
		margin-top: 0.187826rem;
	}
	.b-spa2{
		font-size: 0.347826rem;
		margin-left: 0.360869rem;
		margin-top: 0.187826rem;
	}
	.b-spa1{
		font-size: 0.5rem;
		margin-left: 0.390869rem;
		margin-top: 0.147826rem;
		font-weight: bold;
	}
	.b-img2{
		margin-left: 0.43913rem;
	}
	.b-1{
		display: flex;
		align-items: center;
		font-size: 0.5rem;
		height: 1.630434rem;
		height: 2.782608rem;
		width: 100%;
		border-bottom: solid 0.021739rem #fbfbfb;
	}
	.b-b{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		background-color: white;
		height: 100%;
		width: 100%;
	}
	.b-head{
		width: 100%;
		height: 1.391304rem;
		background-color: #fbfbfb;
		display: flex;
		align-items: center;
	}
	.b-head :nth-child(1){
		margin-left: 0.308695rem;
		width: 0.673913rem;
		height: 0.673913rem;
	}
	.b-head :nth-child(2){
		width: 80%;
		text-align: center;
		font-size: 0.521739rem;
	}
</style>